<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>生成代码 | lowcode</title>
    <meta name="description" content="">
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/assets/logo.png">
    <meta name="description" content="低代码工具">
    <meta name="referrer" content="never">
    <meta name="keywords" content="lowcode">
    <link rel="preload" href="/assets/css/0.styles.9b0a5037.css" as="style"><link rel="preload" href="/assets/js/app.9e4f828f.js" as="script"><link rel="preload" href="/assets/js/2.63a13152.js" as="script"><link rel="preload" href="/assets/js/13.4485523d.js" as="script"><link rel="prefetch" href="/assets/js/10.21256974.js"><link rel="prefetch" href="/assets/js/11.c8692837.js"><link rel="prefetch" href="/assets/js/12.f3273b7c.js"><link rel="prefetch" href="/assets/js/14.b5a376cd.js"><link rel="prefetch" href="/assets/js/15.f3c4584a.js"><link rel="prefetch" href="/assets/js/16.2d7cc251.js"><link rel="prefetch" href="/assets/js/17.8b66ec9b.js"><link rel="prefetch" href="/assets/js/3.cf42858e.js"><link rel="prefetch" href="/assets/js/4.0301f468.js"><link rel="prefetch" href="/assets/js/5.cfdf5b5e.js"><link rel="prefetch" href="/assets/js/6.3c92ec7c.js"><link rel="prefetch" href="/assets/js/7.9cd0ba8d.js"><link rel="prefetch" href="/assets/js/8.71b6f748.js"><link rel="prefetch" href="/assets/js/9.b2f4095e.js">
    <link rel="stylesheet" href="/assets/css/0.styles.9b0a5037.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="ant-row"><div class="nav-button"><i aria-label="icon: bars" class="anticon anticon-bars"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="bars" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path></svg></i> <span></span></div> <div class="ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a href="/" class="router-link-active home-link"><img src="/assets/logo.png" alt="lowcode" class="logo"> <span class="site-name">lowcode</span></a> <div class="search-box mobile-search"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div> <div class="ant-col ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><ul role="menu" id="nav" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-light"><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/" class="router-link-active">
          首页
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/lowcode-vscode/" class="router-link-active">
          lowcode-vscode
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/lowcode-mock/">
          lowcode-mock
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="https://lowcoding.gitee.io/" target="_blank">
          国内镜像
          <i aria-label="icon: link" class="anticon anticon-link"><svg viewBox="64 64 896 896" focusable="false" data-icon="link" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"></path></svg></i></a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul> <a href="https://github.com/lowcoding" target="_blank" rel="noopener noreferrer" class="repo-link"><i aria-label="icon: github" class="anticon anticon-github"><svg viewBox="64 64 896 896" focusable="false" data-icon="github" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"></path></svg></i></a></nav></div></div> <!----></header> <aside class="sidebar"><div><div class="promo"><div id="promo_3"><div class="promo_title">赞助商</div> <button type="button" class="ant-btn ant-btn-primary ant-btn-background-ghost"><span>成为赞助商</span></button></div></div> <div role="separator" id="reset-margin" class="ant-divider ant-divider-horizontal ant-divider-dashed"></div></div> <ul class="sidebar-links"><li><a href="/lowcode-vscode/" aria-current="page" title="关于" class="sidebar-link">关于</a></li><li><a href="/lowcode-vscode/getting-started.html" title="快速上手" class="sidebar-link">快速上手</a></li><li><section class="sidebar-group depth-0"><a href="/lowcode-vscode/detailed-features/" class="sidebar-heading clickable router-link-active open"><span>具体功能及使用指南</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/lowcode-vscode/detailed-features/generate-code-by-command.html" aria-current="page" title="生成代码" class="active sidebar-link">生成代码</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/lowcode-vscode/detailed-features/generate-code-by-command.html#概述" title="概述" class="sidebar-link">概述</a></li><li class="sidebar-sub-header"><a href="/lowcode-vscode/detailed-features/generate-code-by-command.html#根据-yapi-接口定义生成代码" title="根据 YAPI 接口定义生成代码" class="sidebar-link">根据 YAPI 接口定义生成代码</a></li><li class="sidebar-sub-header"><a href="/lowcode-vscode/detailed-features/generate-code-by-command.html#根据-json-生成代码" title="根据 JSON 生成代码" class="sidebar-link">根据 JSON 生成代码</a></li><li class="sidebar-sub-header"><a href="/lowcode-vscode/detailed-features/generate-code-by-command.html#插入代码" title="插入代码" class="sidebar-link">插入代码</a></li><li class="sidebar-sub-header"><a href="/lowcode-vscode/detailed-features/generate-code-by-command.html#模板配置" title="模板配置" class="sidebar-link">模板配置</a></li><li class="sidebar-sub-header"><a href="/lowcode-vscode/detailed-features/generate-code-by-command.html#模板数据" title="模板数据" class="sidebar-link">模板数据</a></li><li class="sidebar-sub-header"><a href="/lowcode-vscode/detailed-features/generate-code-by-command.html#模板例子" title="模板例子" class="sidebar-link">模板例子</a></li></ul></li><li><a href="/lowcode-vscode/detailed-features/generate-code-by-webview.html" title="可视化生成代码" class="sidebar-link">可视化生成代码</a></li><li><a href="/lowcode-vscode/detailed-features/quick-add-snippet.html" title="添加代码片段" class="sidebar-link">添加代码片段</a></li></ul></section></li><li><a href="/lowcode-vscode/create-materials.html" title="物料开发" class="sidebar-link">物料开发</a></li><li><a href="/lowcode-vscode/create-scaffold.html" title="脚手架开发" class="sidebar-link">脚手架开发</a></li><li><a href="/lowcode-vscode/config.html" title="插件配置" class="sidebar-link">插件配置</a></li><li><a href="/lowcode-vscode/change-log.html" title="更新日志" class="sidebar-link">更新日志</a></li><li><a href="/lowcode-vscode/todo.html" title="TODO" class="sidebar-link">TODO</a></li></ul></aside> <main class="page"> <div class="theme-antdocs-content content__default"><h2 id="概述">概述 <a href="#概述" class="header-anchor">#</a></h2> <p>点击菜单 <code>LOW-CODE-&gt;生成代码</code> 即可使用此功能。</p> <p></p> <p></p> <p>此功能为 <a href="https://marketplace.visualstudio.com/items?itemName=wjkang.yapi-code" target="_blank" rel="noopener noreferrer">yapi-code<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 最原始的功能。</p> <p>当执行此功能的时候，插件内部会判断剪贴板内是否为<code>yapi</code>的接口 ID（纯数字内容）或者 <code>JSON</code> 数据。如果都不是则终止执行。</p> <h2 id="根据-yapi-接口定义生成代码">根据 YAPI 接口定义生成代码 <a href="#根据-yapi-接口定义生成代码" class="header-anchor">#</a></h2> <p>如果剪贴板内数据为<code>yapi</code>的接口 ID（纯数字内容），则弹出选择框，选择配置的<code>yapi</code>项目（具体如何配置可查看插件配置一节）：</p> <p><img src="https://fastly.jsdelivr.net/gh/migrate-gitee/img-host@latest/2020/11/02/1604248225586.png" alt=""></p> <p>选择项目之后，接着弹框选择模板：</p> <p><img src="https://fastly.jsdelivr.net/gh/migrate-gitee/img-host@latest/2020/11/02/1604248342476.png" alt=""></p> <blockquote><p>模板配置见下一节</p></blockquote> <h2 id="根据-json-生成代码">根据 JSON 生成代码 <a href="#根据-json-生成代码" class="header-anchor">#</a></h2> <p>如果剪贴板内为<code>JSON</code>数据，则直接弹框选择模板。</p> <p>为了方便，如下格式的内容，插件内部都会转为标注格式的<code>JSON</code>数据：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> model <span class="token operator">=</span> <span class="token punctuation">{</span>
	<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&quot;title&quot;</span><span class="token punctuation">,</span>
	<span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">&quot;description&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
  <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'title'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'description'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
	<span class="token property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;title&quot;</span><span class="token punctuation">,</span>
	<span class="token property">&quot;description&quot;</span><span class="token operator">:</span> <span class="token string">&quot;description&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="插入代码">插入代码 <a href="#插入代码" class="header-anchor">#</a></h2> <p>选择完模板之后，插件内部将模板和数据（剪贴板内<code>JSON</code>数据或者拉取到的<code>yapi</code>接口信息）进行编译，然后将编译得到的代码片段插入到编辑器内光标所在的位置。</p> <h2 id="模板配置">模板配置 <a href="#模板配置" class="header-anchor">#</a></h2> <p>插件会读取当前打开项目的根目录文件夹 <code>codeTemplate</code> 内的文件做为模板。</p> <p>模板文件名必须以 <code>.ejs</code> 结尾，模板语法查看 <a href="https://ejs.bootcss.com/" target="_blank" rel="noopener noreferrer">EJS 文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><img src="https://jaycewu.coding.net/p/img-host/d/buket1/git/raw/master/2020/11/02/1604292222596.png" alt=""></p> <h2 id="模板数据">模板数据 <a href="#模板数据" class="header-anchor">#</a></h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
	<span class="token literal-property property">type</span><span class="token operator">:</span> string<span class="token punctuation">;</span> <span class="token comment">// 生成的 ts 接口类型</span>
	requestBodyType：string<span class="token punctuation">;</span> <span class="token comment">// yapi 接口定义需要提交的数据的 ts 接口类型</span>
    <span class="token literal-property property">funcName</span><span class="token operator">:</span> string<span class="token punctuation">;</span> <span class="token comment">// vs 代码编辑器选中的文本通过空格' '分割后的第一个元素</span>
    <span class="token literal-property property">typeName</span><span class="token operator">:</span> string<span class="token punctuation">;</span> <span class="token comment">// vs 代码编辑器选中的文本通过空格' '分割后的第二个元素</span>
    <span class="token literal-property property">api</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">query_path</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">path</span><span class="token operator">:</span> string<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
        <span class="token literal-property property">method</span><span class="token operator">:</span> string<span class="token punctuation">;</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> string<span class="token punctuation">;</span>
        <span class="token literal-property property">project_id</span><span class="token operator">:</span> number<span class="token punctuation">;</span>
        <span class="token literal-property property">req_params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
			<span class="token literal-property property">name</span><span class="token operator">:</span> string<span class="token punctuation">;</span>
			<span class="token literal-property property">desc</span><span class="token operator">:</span> string<span class="token punctuation">;</span>
		<span class="token punctuation">}</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token literal-property property">_id</span><span class="token operator">:</span> number<span class="token punctuation">;</span>
        <span class="token literal-property property">req_query</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token string">'0'</span> <span class="token operator">|</span> <span class="token string">'1'</span><span class="token punctuation">;</span> name<span class="token operator">:</span> string <span class="token punctuation">}</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token literal-property property">res_body_type</span><span class="token operator">:</span> <span class="token string">&quot;raw&quot;</span> <span class="token operator">|</span> <span class="token string">&quot;json&quot;</span><span class="token punctuation">;</span>
        <span class="token literal-property property">res_body</span><span class="token operator">:</span> string<span class="token punctuation">;</span>
        <span class="token literal-property property">username</span><span class="token operator">:</span> string<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// yapi 接口返回的信息，这里只列出可能需要的字段，模板中可以访问到全部</span>
	<span class="token literal-property property">inputValues</span><span class="token operator">:</span> string<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// vscode 代码编辑器选中的文本通过空格' '分割后的数组，第一个元素就是`funcName`，第二个为 `typeName`</span>
	mockCode：string<span class="token punctuation">;</span> <span class="token comment">// 生成的 mock 代码，主要是 数组类型数据的生成代码</span>
	<span class="token literal-property property">mockData</span><span class="token operator">:</span> string<span class="token punctuation">;</span> <span class="token comment">// 生成的 mock 数据</span>
	<span class="token literal-property property">rawSelectedText</span><span class="token operator">:</span> string<span class="token punctuation">;</span> <span class="token comment">//编辑器中选中的原始文本</span>
    <span class="token literal-property property">rawClipboardText</span><span class="token operator">:</span> string<span class="token punctuation">;</span> <span class="token comment">//系统剪贴板中的原始文本</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>type</strong></p> <p>剪贴板内 <code>JSON</code> 数据或者 <code>yapi</code> 接口定义返回数据转换为 TS 接口类型的代码。</p> <br> <p><strong>requestBodyType</strong></p> <p><code>yapi</code> 接口定义提交数据转换为 TS 接口类型的代码。</p> <br> <p><strong>funcName</strong></p> <p>编辑器选中的文本通过空格' '分割后的第一个元素，如果没有，默认值为 <code>fetch</code></p> <br> <p><strong>typeName</strong></p> <p>编辑器选中的文本通过空格' '分割后的第二个元素, 如果没有，使用 <code>funcName</code> 处理后得到，比如：</p> <p><code>funcName</code> 为 <code>fetch</code>，那么 <code>typeName</code> 为 <code>IFetchResult</code></p> <br> <p><strong>api</strong></p> <p>为 <code>yapi</code> 接口定义信息。具体可查看 <code>yapi</code> <strong>获取接口数据</strong>的 <a href="https://yapi.baidu.com/doc/openapi.html" target="_blank" rel="noopener noreferrer">开放 api 文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <br> <p><strong>inputValues</strong></p> <p>编辑器中选中的文本通过空格' '分割后的数组，第一个元素就是 <code>funcName</code>，第二个就是 <code>typeName</code>，模板中可以通过下标取到，比如 <code>inputValues[0]</code></p> <br> <p><strong>mockCode</strong></p> <p>生成的 mock 代码，主要是数组类型数据的生成代码。</p> <p>比如有如下 json 数据：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> json <span class="token operator">=</span> <span class="token punctuation">{</span>
	<span class="token literal-property property">values</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p>对应的 mockCode 为：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> list1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">10</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
	list1<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>Random<span class="token punctuation">.</span><span class="token function">natural</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p>Random.natural(100, 1000) 可通过插件配置项进行配置</p></blockquote> <br> <p><strong>mockData</strong></p> <p>生成的 mock 数据，结合 <code>mockCode</code> 使用可创建一个 mock 模板，自动生成接口 mock，比如</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">xxxxx</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">ctx<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
	<span class="token operator">&lt;</span><span class="token operator">%</span><span class="token operator">-</span> mockCode <span class="token operator">%</span><span class="token operator">&gt;</span> ctx<span class="token punctuation">.</span>body <span class="token operator">=</span> <span class="token operator">&lt;</span><span class="token operator">%=</span> mockData <span class="token operator">%</span><span class="token operator">&gt;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><p>生成代码如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">xxxxx</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">ctx<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
	<span class="token keyword">const</span> list1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
	<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">10</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
		list1<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>Random<span class="token punctuation">.</span><span class="token function">natural</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
	<span class="token punctuation">}</span>
	ctx<span class="token punctuation">.</span>body <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">values</span><span class="token operator">:</span> list1 <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><br> <p><strong>rawSelectedText</strong></p> <p>编辑器中选中的原始文本</p> <br> <p><strong>rawClipboardText</strong></p> <p>系统剪贴板中的原始文本</p> <h2 id="模板例子">模板例子 <a href="#模板例子" class="header-anchor">#</a></h2> <p>这是一个拉取 <code>YAPI</code> 接口数据，生成前端接口请求代码的模板。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span><span class="token operator">%=</span> type <span class="token operator">%</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">%</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>api<span class="token punctuation">.</span>req_query<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span> <span class="token operator">||</span> api<span class="token punctuation">.</span>req_params<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">%</span><span class="token operator">&gt;</span>
<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">I</span><span class="token operator">&lt;</span><span class="token operator">%=</span> funcName<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> funcName<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">%</span><span class="token operator">&gt;</span>Params <span class="token punctuation">{</span>
<span class="token operator">&lt;</span><span class="token operator">%</span> api<span class="token punctuation">.</span>req_query<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">query</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token operator">%</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">%=</span> query<span class="token punctuation">.</span>name <span class="token operator">%</span><span class="token operator">&gt;</span><span class="token operator">:</span> 请手动修改此类型<span class="token punctuation">;</span><span class="token operator">&lt;</span><span class="token operator">%</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">%</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">%</span> api<span class="token punctuation">.</span>req_params<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">query</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token operator">%</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">%=</span> query<span class="token punctuation">.</span>name <span class="token operator">%</span><span class="token operator">&gt;</span><span class="token operator">:</span> 请手动修改此类型<span class="token punctuation">;</span><span class="token operator">&lt;</span><span class="token operator">%</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">%</span><span class="token operator">&gt;</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">%</span> <span class="token punctuation">}</span> <span class="token operator">%</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">%</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>requestBodyType<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">%</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">%=</span> requestBodyType <span class="token operator">%</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">%</span> <span class="token punctuation">}</span> <span class="token operator">%</span><span class="token operator">&gt;</span>

<span class="token comment">/**
* &lt;%= api.title %&gt;
* https://yapi.baidu.com/project/&lt;%= api.project_id %&gt;/interface/api/&lt;%= api._id %&gt;
* @author &lt;%= api.username %&gt;
*
&lt;% if (api.req_query.length &gt; 0 || api.req_params.length &gt; 0) { -%&gt;* @param {I&lt;%= funcName.slice(0, 1).toUpperCase() + funcName.slice(1) %&gt;Params} params&lt;% } %&gt;
&lt;% if (requestBodyType) { -%&gt;* @param {I&lt;%= funcName.slice(0, 1).toUpperCase() + funcName.slice(1) %&gt;Data} data&lt;% } %&gt;
* @returns
*/</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token operator">&lt;</span><span class="token operator">%=</span> funcName <span class="token operator">%</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span><span class="token operator">%</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>api<span class="token punctuation">.</span>req_query<span class="token punctuation">.</span>length<span class="token operator">&gt;</span><span class="token number">0</span> <span class="token operator">||</span> api<span class="token punctuation">.</span>req_params<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">%</span><span class="token operator">&gt;</span>
<span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token constant">I</span><span class="token operator">&lt;</span><span class="token operator">%=</span> funcName<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> funcName<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">%</span><span class="token operator">&gt;</span>Params<span class="token punctuation">,</span>
<span class="token operator">&lt;</span><span class="token operator">%</span> <span class="token punctuation">}</span> _<span class="token operator">%</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">%</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>requestBodyType<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">%</span><span class="token operator">&gt;</span>
<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token constant">I</span><span class="token operator">&lt;</span><span class="token operator">%=</span> funcName<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> funcName<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">%</span><span class="token operator">&gt;</span>Data
<span class="token operator">&lt;</span><span class="token operator">%</span> <span class="token punctuation">}</span> <span class="token operator">%</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> request<span class="token operator">&lt;&lt;</span><span class="token operator">%=</span> typeName <span class="token operator">%</span><span class="token operator">&gt;&gt;</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;%= api.query_path.path.replace(/\{/g,&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>params<span class="token punctuation">.</span>&quot;<span class="token punctuation">)</span> <span class="token operator">%</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">%</span> <span class="token keyword">if</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span>req_query<span class="token punctuation">.</span>length<span class="token operator">&gt;</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">%</span><span class="token operator">&gt;</span><span class="token operator">?</span><span class="token operator">&lt;</span><span class="token operator">%</span> api<span class="token punctuation">.</span>req_query<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">query</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token operator">%</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">%=</span> query<span class="token punctuation">.</span>name <span class="token operator">%</span><span class="token operator">&gt;=</span>$<span class="token punctuation">{</span>params<span class="token punctuation">.</span><span class="token operator">&lt;</span><span class="token operator">%=</span> query<span class="token punctuation">.</span>name <span class="token operator">%</span><span class="token operator">&gt;</span><span class="token punctuation">}</span><span class="token operator">&amp;</span><span class="token operator">&lt;</span><span class="token operator">%</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">%</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">%</span> <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> %&gt;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
		<span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'&lt;%= api.method %&gt;'</span><span class="token punctuation">,</span>
<span class="token operator">&lt;</span><span class="token operator">%</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>requestBodyType<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token operator">%</span><span class="token operator">&gt;</span>data<span class="token punctuation">,</span><span class="token operator">&lt;</span><span class="token operator">%</span> <span class="token punctuation">}</span> <span class="token operator">%</span><span class="token operator">&gt;</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><p><code>YAPI</code> 接口定义如下：</p> <p><img src="https://fastly.jsdelivr.net/gh/migrate-gitee/img-host@latest/2020/11/03/1604410094022.png" alt=""></p> <p>编译之后生成如下代码：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">IYapiRequestResult</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">code</span><span class="token operator">:</span> number<span class="token punctuation">;</span>
  <span class="token literal-property property">msg</span><span class="token operator">:</span> string<span class="token punctuation">;</span>
  <span class="token literal-property property">pagination</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">total</span><span class="token operator">:</span> number<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">id</span><span class="token operator">:</span> number<span class="token punctuation">;</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> string<span class="token punctuation">;</span>
    <span class="token literal-property property">price</span><span class="token operator">:</span> number<span class="token punctuation">;</span>
    <span class="token literal-property property">description</span><span class="token operator">:</span> string<span class="token punctuation">;</span>
    <span class="token literal-property property">sku</span><span class="token operator">:</span> string<span class="token punctuation">;</span>
    <span class="token literal-property property">spu</span><span class="token operator">:</span> string<span class="token punctuation">;</span>
    <span class="token literal-property property">image</span><span class="token operator">:</span> string<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">IFetchParams</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> 请手动修改此类型<span class="token punctuation">;</span>
  <span class="token literal-property property">sku</span><span class="token operator">:</span> 请手动修改此类型<span class="token punctuation">;</span>
  <span class="token literal-property property">status</span><span class="token operator">:</span> 请手动修改此类型<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">IFetchData</span> <span class="token punctuation">{</span>
  name<span class="token operator">?</span><span class="token operator">:</span> string<span class="token punctuation">;</span>
  sku<span class="token operator">?</span><span class="token operator">:</span> string<span class="token punctuation">;</span>
  status<span class="token operator">?</span><span class="token operator">:</span> number<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 * 获取产品列表
 * https://yapi.baidu.com/project/8641/interface/api/89813
 * @author 若邪
 *
 * @param {IFetchParams} params
 * @param {IFetchData} data
 * @returns
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">params</span><span class="token operator">:</span> IFetchParams<span class="token punctuation">,</span> <span class="token literal-property property">data</span><span class="token operator">:</span> IFetchData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> request<span class="token operator">&lt;</span>IYapiRequestResult<span class="token operator">&gt;</span><span class="token punctuation">(</span>
    <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/product/list?name=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>params<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&amp;sku=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>params<span class="token punctuation">.</span>sku<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&amp;status=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>params<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&amp;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
      data<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">5/21/2022, 8:45:47 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"><a href="/lowcode-vscode/getting-started.html" class="prev"><i aria-label="icon: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>
        快速上手
      </a></span> <span class="next"><a href="/lowcode-vscode/detailed-features/generate-code-by-webview.html">
        可视化生成代码
        <i aria-label="icon: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></span></p></div> </main> <!----></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.9e4f828f.js" defer></script><script src="/assets/js/2.63a13152.js" defer></script><script src="/assets/js/13.4485523d.js" defer></script>
  </body>
</html>